<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    ul{
    }
  </style>
  <body>
    <!--  
        > 和 +
        div>h1+p>span+strong>i 
    -->
    <div>
      <h1></h1>
      <p>
        <span></span>
        <strong>
            <i></i>
        </strong>
      </p>
    </div>
    <!-- 
        *  多个
        ul>li*10 -->
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <!-- 
        () 分组
        div>span+p+(h1>span+i)+p -->
        <div>
            <span></span>
            <p></p>
            <h1><span></span><i></i></h1>
            <p></p>
        </div>
    <!-- 
        ^ 上一级
        div>span+p+h1>span+i^p -->
    <div>
        <span></span>
        <p></p>
        <h1><span></span><i></i></h1>
        <p></p>
    </div>
    <!-- 属性 -->
    <!-- a[href="http://www.baidu.com"]{百度一下} -->
    <!-- id/class -->
    <!-- div#main -->
    <div id="main"></div>
    <!-- ul>li{列表内容$$$}*10 -->
    <ul>
        <li>列表内容001</li>
        <li>列表内容002</li>
        <li>列表内容003</li>
        <li>列表内容004</li>
        <li>列表内容005</li>
        <li>列表内容006</li>
        <li>列表内容007</li>
        <li>列表内容008</li>
        <li>列表内容009</li>
        <li>列表内容010</li>
    </ul>


  </body>
</html>
